<template xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="">
  <div class="recruit">
    <div class="recruit-top-img"></div>
    <div class="recruit-title">
      <p>Post</p>
      <p>现招职位</p>
      <p>简历投递邮箱 | heng1808@163.com</p>
    </div>
    <div class="recruit-tab">
      <div class="recruit-tab-title">
        <P v-for="(value,index) in list" :key="index" v-on:click="changeNum(index)">{{value}}</P>

      </div>
      <div class="recruit-tab-border">
        <p v-bind:class=" {recruitTabBorderP:$store.state.changeNum==0}"></p>
        <p v-bind:class=" {recruitTabBorderP:$store.state.changeNum==1}"></p>
        <p v-bind:class=" {recruitTabBorderP:$store.state.changeNum==2}"></p>
      </div>
      <div class="recruit-tab-contnet">
        <div
          class="recruithide"
          v-bind:class=" {recruitshow:$store.state.changeNum==0}"
          style="width:100%"
        >
          <recruitTabBox :type="this.type" :data="this.recruitData"></recruitTabBox>
        </div>
        <div
          class="recruithide"
          v-bind:class=" {recruitshow:$store.state.changeNum==1}"
          style="width:100%;"
        >
          <recruitTabBox :type="this.type" :data="recruitData"></recruitTabBox>
        </div>
        <div
          class="recruithide"
          v-bind:class=" {recruitshow:$store.state.changeNum==2}"
          style="width:100%"
        >
          <recruitTabBox :type="this.type"  :data="recruitData"></recruitTabBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import recruitTabBox from "./recruitTabBox";
  import axios from 'axios';

  export default {
    name: "recruit",
    data() {
      return {
        type:0,
        dataDown: true,
        dataContentBox: false,
        recruitData: [
        ],
        recruitData1: [
          {
            position: "",
            salary: "",
            experience: " ",
            education: "",
            SkillRequirement: "",
            adress: "",
            city: "",
            arrayp: ""
          }
        ],
        list: ["查看全部", "技术团队", "服务团队"],
        dynamic: 0
      };
    },

    watch: {
      '$route': "login", //需要处理数据的方法
    },
    create(){
    },

    methods: {
      changeNum(num) {
        this.type = parseInt(num);
        this.$store.state.changeNum = num;
      },

    },

    components: {
      recruitTabBox
    }
  };
</script>

<style scoped>
  .recruit-top-img {
    width: 100%;
    height: 26.18rem;
    background-image: url("../assets/recruit/recruit-top.png");
    background-size: 100% 100%;
    margin-top: 1px;
  }

  p {
    text-align: center;
    cursor: pointer;
  }

  .recruit-title p:nth-of-type(1) {
    font-size: 3.25rem;
    line-height: 4.56rem;
    color: #ccc;
    opacity: 0.3;
    font-weight: 600;
    margin-top: 4rem;
  }

  .recruit-title p:nth-of-type(2) {
    font-size: 2rem;
    line-height: 2.81rem;
    color: #333;
    font-weight: 600;
    position: relative;
    top: -2.5rem;
  }

  .recruit-title p:nth-of-type(3) {
    position: relative;
    top: -1.5rem;
    font-size: 1rem;
    line-height: 1.375rem;
    margin: 0 auto;
    color: #3eadff;
    font-weight: 400;
    width: 19.375rem;
    height: 2.25rem;
    line-height: 2.25rem;
    vertical-align: middle;
    background: rgba(36, 139, 242, 0.1);
    border-radius: 19px;
    border: 1px solid rgba(47, 169, 222, 1);
  }

  /* recruit-tab */
  .recruit-tab {
    width: 63%;
    margin: 0 auto;
  }

  .recruit-tab-title {
    width: 100%;
    height: 4.125rem;
    background-color: #f4fcff;
    margin-top: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .recruit-tab-title p {
    text-align: center;
    width: 24.94rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #3eadff;
  }

  .recruit-tab-title p:nth-of-type(1),
  .recruit-tab-title p:nth-of-type(2) {
    border-right: 1px solid #efefef;
  }

  .recruit-tab-border {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2px;
  }

  .recruitTabBorderP {
    width: 33.3%;
    height: 2px;
    background: linear-gradient(to right, #3ac4f2, #0e54f1);
    opacity: 0.8;
  }

  /* tab content  */
  .recruit-tab-contnet {
    width: 112%;
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    padding-bottom: 8.44rem;
    flex-wrap: wrap;
  }

  /* 详细盒子 */
  .recruitTabBox {
    width: 32%;
    border: 1px solid #f5f4f4d3;
    box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-bottom: 1rem;
  }

  .recruitTabBox-flex-base {
    display: flex;
  }

  .recruitTabBox-width {
    width: 88%;
    margin: 0 auto;
  }

  .recruitTabBox-down {
    background-color: #fff;
    justify-content: center;
    align-items: center;
    margin-top: 0.375rem;
  }

  .recruitTabBox-down img {
    width: 0.94rem;
    height: 0.562rem;
    padding: 1rem;
    cursor: pointer;
  }

  .recruitTabBox-content p {
    text-align: start;
  }

  .recruithide {
    display: none !important;
  }

  .recruitshow {
    display: block !important;
  }
</style>
